<template>
  <div class="">
    <h1>监听属性</h1>
    <button @click="num++">num++</button>
    <button @click="obj.name = '小红'">改变名字</button>

    <input type="text" v-model="name" />
    <button @click="add">add</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      obj: {
        name: "小明",
      },
      list: [{ name: "小明" }, { name: "小宏" }],
      name: "",
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  methods: {
    add() {
      this.list.push({ name: this.name });
      // localStorage.setItem("list", JSON.stringify(this.list));
    },
  },
  computed: {},
  components: {},
  watch: {
    // num: {
    //   handler(newval, oldval) {
    //     console.log(newval, oldval);
    //   }, //只要num一变化就会执行 这个函数
    //   immediate: true,
    //   //默认的是false 一进入页面立刻执行监听函数
    //   deep: true,
    // },
    //每一个watch 有三个参数 handler执行函数 immediate 立刻执行 deep深度监听

    obj: {
      handler(newval) {
        console.log(newval);
      },
      deep: true,
      //对于json等复杂数据类型来说  开启深度监听才能 监听到内部的变化
    },

    // watch可以简写 当不需要immediate和deep的时候 只需要handler就可以简写
    num(newval, oldval) {
      console.log(newval);
    },
    list(newval) {
      localStorage.setItem("list", JSON.stringify(newval));
    },
    //只要数据一变就会自动存本地存储
  },
};
</script>

<style lang="scss"></style>
